<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Load nodes on demand from the server in javascript tree</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../extra/css/gridless.css">
    <link rel="stylesheet" href="../extra/prism/prism.css">
    <link rel="stylesheet" href="example.css">
    <link rel="stylesheet" href="../jqtree.css">
    <!--[if lt IE 9]>
        <script src="../extra/js/jquery-1.10.2.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
        <script src="../extra/js/jquery-2.0.3.min.js"></script>
    <!--<![endif]-->
    <script src="../extra/prism/prism.js"></script>
    <script src="../extra/js/jquery.mockjax.js"></script>
    <script src="../extra/example_data.js"></script>
    <script src="../tree.jquery.js"></script>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-33742133-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>
</head>
<body>
    <p id="nav">
        <a href="save_state.html">&laquo; Example 4</a>
        
            <a href="autoescape.html" class="next">Example 6 &raquo;</a>
        
    </p>

    <h1>Example 5 - Load nodes on demand from the server</h1>

    
    <div id="tree1" data-url="/nodes/"></div>

    <p>
        In this example, the data is loaded on demand from the server.
        <br>
        To use load on demand, you must do the following:
    </p>

    <ul>
        <li>
            You must specify a <strong>data url</strong>. In this example this is done using the <strong>data-url</strong> 
            html data attribute.
        </li>
        <li>
            Folders that must be loaded on demand must have the <strong>load_on_demand</strong> property. You can specify this in the data.
        </li>
        <li>
            In this example, the url <strong>/nodes/</strong> returns the first level of data (Saurischia and Ornithischians).
        </li>
        <li>
            The url for the load on demand data is <strong>&lt;data-url&gt;?node=&lt;node-id&gt;</strong>. So, for node 23  this would be
            <strong>/nodes/?node=23</strong>.
        </li>
    </ul>

    <h3>first level of data</h3>
<pre><code class="language-javascript">
[
  {
    label: 'Saurischia',
    id: 1,
    load_on_demand: true
  },
  {
    label: 'Ornithischians',
    id: 23,
    load_on_demand: true
  }
]
</code></pre>

    <h3>html</h3>

<pre><code class="language-markup">
&lt;div id="tree1" data-url="/nodes/"&gt;&lt;/div&gt;
</code></pre>

    <h3>javascript</h3>

<pre><code class="language-javascript">
$('#tree1').tree({
    dragAndDrop: true
});
</code></pre>

    <script>
        $.mockjax({
            url: '*',
            responseTime: 1000,
            response: function(options) {
                if (options.data && options.data.node) {
                    this.responseText = ExampleData.getChildrenOfNode(options.data.node);
                }
                else {
                    this.responseText = ExampleData.getFirstLevelData();
                }
            }
        });

        $(function() {
            var $tree = $('#tree1');

            $tree.tree({
                dragAndDrop: true
            });
        });
    </script>

</body>
</html>